<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册旅行社</title>
<jsp:include page="/WEB-INF/jsp/include1.jsp"></jsp:include>

<script src="js/vue/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue/eleme.js"></script>
<link rel="stylesheet" type="text/css" href="css/eleme.css"/>
<style>
    [v-cloak] {
        display: none;
    }
    .formbox{
        border: 1px solid #ebebeb;
        border-radius: 3px;
        width: 1200px;
        margin: 0 auto;
        margin-bottom: 30px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #1eab3c;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .note{
        font-size: 15px;
        margin: 30px;
        color: #1eab3c;
    }
</style>
</head>
<body>
<div id="off-canvas-container" class="off-canvas-container">
		<jsp:include page="/WEB-INF/jsp/FrontHeader.jsp"></jsp:include>
		<main class="at-padding-large-bottom">
		<article>
		<header class="bg-light at-padding-large-top at-padding-large-bottom at-margin-large-bottom">
		<div class="page-header container">
			<div class="row">
				<div class="span-5 col">
					<h3>企业注册</h3>
				</div>
			</div>
		</div>
		</header> 
	    <div id="app" v-cloak>
		<section class="container">
		<div class="information">
			<h4 class="info-h4">
				<i class="fa fa-caret-right" aria-hidden="true"></i>营业部注册
			</h4>
		</div>
        <div class="formbox">
            <el-form :model="ff" ref="ff" :inline="true" label-width="120px">
                <el-form-item label="公司名称" prop="cOrgName" :rules="{required: true, message:'请输入',trigger: 'blur'}">
                    <el-input v-model="ff.cOrgName" placeholder="公司名称" style="width: 350px;"></el-input>
                </el-form-item>
                <el-row>
                    <el-col>
                            <span class="note"><i class="el-icon-question"></i>审核通过后，该手机号为公司登录账号,初始密码是123abc</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="联系人" prop="cContant" :rules="{required: true, message:'请输入',trigger: 'blur'}">
                            <el-input v-model="ff.cContant" placeholder="联系人姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机" prop="cMobile" :rules="{required: true, message:'请输入',trigger: 'blur'}">
                            <el-input v-model="ff.cMobile" placeholder="联系人电话"></el-input>
                        </el-form-item> 
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="传真" prop="cFax">
                            <el-input v-model="ff.cFax" placeholder="非必填"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="固话" prop="cTel">
                            <el-input v-model="ff.cTel" placeholder="非必填"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所在地区" prop="iZoneID" :rules="{required: true, message:'请选择地区',trigger: 'change'}">
                            <el-cascader filterable v-model="ff.iZoneID" placeholder="可输入" :options="tours" style="width: 300px;"></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="详细地址" prop="cAddress" :rules="{required: true, message:'请输入',trigger: 'blur'}">
                            <el-input v-model="ff.cAddress" placeholder="精确到门牌号" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>  
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="营业执照" ref="uploadElement" prop="image1" :rules="{required: true, message:'请上传营业执照',trigger: 'change'}">
                            <el-input v-model="ff.image1" v-if="false" ></el-input>
                            <el-upload
                                class="avatar-uploader"
                                ref="upload"
                                :show-file-list="false"
                                action="aaa"
                                :before-upload="beforeUpload"
                                :on-change="handleChange"
                                :data="ff">
                                <img v-if="ff.image1" :src="ff.image1" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="负责人身份证" ref="uploadElement" prop="image2" :rules="{required: true, message:'请上传负责人身份证',trigger: 'change'}">
                            <el-input v-model="ff.image2" v-if="false"></el-input>
                            <el-upload
                                class="avatar-uploader"
                                accept="image/jpeg,image/jpg,image/png"
                                action="bbb"
                                :before-upload="beforeUpload2"
                                ref="upload"
                                :on-change="handleChange2"
                                :data="ff"
                                :show-file-list="false">
                                <img v-if="ff.image2" :src="ff.image2" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-row>
                    <el-col :span="12">
                        <el-form-item label="总社营业执照" ref="uploadElement" prop="image3" :rules="{required: true, message:'请上传总社营业执照',trigger: 'change'}">
                            <el-input v-model="ff.image3" v-if="false" ></el-input>
                            <el-upload
                                class="avatar-uploader"
                                ref="upload"
                                :show-file-list="false"
                                action="aaa"
                                :before-upload="beforeUpload3"
                                :on-change="handleChange3"
                                :data="ff">
                                <img v-if="ff.image3" :src="ff.image3" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="总社授权书" ref="uploadElement" prop="image4" :rules="{required: true, message:'请上传授权书',trigger: 'change'}">
                            <el-input v-model="ff.image4" v-if="false"></el-input>
                            <el-upload
                                class="avatar-uploader"
                                action="bbb"
                                :before-upload="beforeUpload4"
                                ref="upload"
                                :on-change="handleChange4"
                                :data="ff"
                                :show-file-list="false">
                                <img v-if="ff.image4" :src="ff.image4" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="ff.cMemo" style="width: 600px;" placeholder="非必填"></el-input>
                </el-form-item>
            </el-form>
            <center>
                <el-button @click="submitForm('ff')" type="primary">提交申请</el-button>
                <el-button @click="resetForm('ff')" type="warning">清空</el-button>
            </center>
		</div>
	</div><!-- container -->
	</div><!-- app -->
	</section>
	</article>
	</main>
	<jsp:include page="/WEB-INF/jsp/Footer.jsp"></jsp:include>
	<jsp:include page="/WEB-INF/jsp/include2.jsp"></jsp:include>
</body>

<script>
	const vm = new Vue({
        el:"#app",
        data(){
            return{
                ff:{
                    cOrgName:'',
                    cContant:'',
                    cMobile:'',
                    cFax:'',
                    cTel:'',
                    iZoneID:[],
                    cAddress:'',
                    cMemo:'',
                    image1:'',
                    image2:'',
                    image3:'',
                    image4:''
                },
                fd:new FormData(),
                tours:[]
            }
        },
        created(){
             axios.get('zone.json')
            .then(res => this.tours = res.data)
            .catch(error =>console.log(error))
        },
        methods:{
            submitForm(formName){
                let vm = this;
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        //vm.$refs.upload.submit();
                        vm.fd.append('cOrgName',vm.ff.cOrgName)
                        vm.fd.append('cContant',vm.ff.cContant)
                        vm.fd.append('cMobile',vm.ff.cMobile)
                        vm.fd.append('cFax',vm.ff.cFax)
                        vm.fd.append('cTel',vm.ff.cTel)
                        vm.fd.append('iZoneID',vm.ff.iZoneID)
                        vm.fd.append('cAddress',vm.ff.cAddress)
                        vm.fd.append('cMemo',vm.ff.cMemo)
                        axios.post('uploadtest2',vm.fd)
                        .then(res => (console.log(res)))
                        .catch(error => console.log(error))
						this.$message.success('提交成功!')
                        location.href="/mmy/"
                    }else{
                        this.$message.error('请根据提示正确填写!')
                        return false
                    }
                });
            },
            resetForm(formName){
                this.$refs[formName].resetFields()
                this.ff.image = ''
                this.iZoneID = ''
            },
            handleChange(file,fileList){
                this.ff.image1 = URL.createObjectURL(file.raw)
            },
            handleChange2(file, fileList) {
                this.ff.image2 = URL.createObjectURL(file.raw)
            },
            handleChange3(file,fileList){
                this.ff.image3 = URL.createObjectURL(file.raw)
            },
            handleChange4(file, fileList) {
                this.ff.image4 = URL.createObjectURL(file.raw)
            },
            beforeUpload(file){
                this.fd.append('file1',file)
                return false
            },
            beforeUpload2(file){
                this.fd.append('file2',file)
                return false
            },
            beforeUpload3(file){
                this.fd.append('file3',file)
                return false
            },
            beforeUpload4(file){
                this.fd.append('file4',file)
                return false
            },
            handleAvatarSuccess(){
                console.log("上传成功!!!");
            }
        }
    })
</script>
</html>